<h4>Operable Tree With Search</h4>
<div class="row">
  <d-search style="width: 300px" [placeholder]="'search your node...'" [isKeyupSearch]="true" (searchFn)="onKeyUp($event)"></d-search>
</div>

<div class="row">
  <d-search style="width: 300px" [placeholder]="'filter your node...'" [isKeyupSearch]="true" (searchFn)="onKeyUp2($event)"></d-search>
</div>

<div class="row">
  <d-search
    style="width: 300px"
    [placeholder]="'filter your node by  custom key...'"
    [isKeyupSearch]="true"
    (searchFn)="onKeyUp3($event)"
  ></d-search>
  <div class="icon icon-help help-tip" dTooltip [content]="'使用自定义的属性搜索匹配树节点'"></div>
</div>

<div class="row">
  <d-search
    style="width: 300px"
    [placeholder]="'filter your node by Regex...'"
    [isKeyupSearch]="true"
    (searchFn)="onKeyUp4($event)"
  ></d-search>
  <div class="icon icon-help help-tip" dTooltip [content]="'使用正则表达式限定搜索范围'"></div>
</div>

<d-operable-tree
  #dOperableTreeComponent="dOperableTreeComponent"
  [tree]="data2"
  [treeNodeIdKey]="'id'"
  [treeNodeChildrenKey]="'children'"
  (nodeDeleted)="onOperableNodeDeleted($event)"
  (nodeSelected)="onOperableNodeSelected($event)"
>
</d-operable-tree>
